import { Bullet } from '@ant-design/plots';
import React from 'react';

type ColumnLineChartProps = {
  BidirectionalBarChartID: string;
  BidirectionalBarChartList: Array<BidirectionalBarChartItem>;
};
type BidirectionalBarChartItem = {
  title: string;
  measures: number[];
};

const BidirectionalBarChart: React.FC<ColumnLineChartProps> = ({
  BidirectionalBarChartID,
  BidirectionalBarChartList,
}) => {
  const color = {
    measures: ['#006eff', '#00c8dc'],
    legend: {
      positio: 'bottom',
      visible: false,
    },
  };

  const config = {
    data: BidirectionalBarChartList,
    autoFit: 'true',
    color,
    axis: {
      x: {
        line: false,
        label: true,
        labelFontSize: 16,
        labelFill: '#fff',
        labelFillOpacity: 1,
      },
      y: {
        line: false,
        lineStrokeOpacity: 1,
        label: false,
      },
    },
    legend: {
      color: {
        itemLabelFill: '#fff',
        //   itemValueText:(datum:any,index:any):string => {
        //     console.log('111',datum,index);
        //     if(index === 0 || index === '0') {
        //       return '供应量'
        //     } else {
        //       return '需求量'
        //     }
        //   },
      },
      size: {},
    },
    tooltip: {
      title: '单位：公斤',
      // items: (item:any) => {
      //   console.log('item',item);
      //   return item
      // },
    },
  };
  return <Bullet id={BidirectionalBarChartID} {...config} />;
};
export default BidirectionalBarChart;
